<template>
  <view class="user-userInfo-page">
    <!--    头像-->
    <view class="u-flex u-row-center u-padding-20 background-color-fff">
      <view  class="u-flex u-row-center" style="flex-direction: column;" @click="chooseAvatar">
        <u-avatar :src="avatar.url">
        </u-avatar>
        <view class="u-light-color u-padding-10">
          <text v-if="avatar.url">点击更换头像</text>
          <text v-else>点击上传头像</text>
        </view>
      </view>
    </view>

<!--    其它-->
    <view class="u-m-t-20">
      <u-cell-group >
        <u-cell-item  title="昵称" :value="userInfo.nickname || '未填写'" @click="goToTextPublish({label: '昵称',eventSuccessName: 'userNicknameUpdateEvent'})"></u-cell-item>
        <u-cell-item  title="婚姻情况" :value="userInfo.maritalStatusDictName || '未填写'"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group >
        <u-cell-item  title="真实姓名" :value="userInfo.name || '未填写'" label="实名认证后，以实名认证为准" @click="goToTextPublish({label: '真实姓名',tip:'实名认证后，以实名认证为准',eventSuccessName: 'userNameUpdateEvent'})"></u-cell-item>
        <u-cell-item  title="性别" :value="userInfo.genderDictName || '未填写'"></u-cell-item>
        <u-cell-item  title="生日" :value="userInfo.birthDay || '未填写'"></u-cell-item>
        <u-cell-item  title="血型" :value="userInfo.bloodTypeDictName || '未填写'"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group >
        <u-cell-item  title="身高（cm）" :value="userInfo.height || '未填写'" @click="goToTextPublish({label: '身高',tip:'直接填写数字，请不要带单位后缀，默认cm',eventSuccessName: 'userHeightUpdateEvent'})"></u-cell-item>
        <u-cell-item  title="体重（kg）" :value="userInfo.weight || '未填写'"  @click="goToTextPublish({label: '体重',tip:'直接填写数字，请不要带单位后缀，默认kg',eventSuccessName: 'userWeightUpdateEvent'})"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group >
        <u-cell-item  title="学校"  :value="userInfo.college || '未填写'" @click="goToTextPublish({label: '学校',tip:'请填写最高学历的学校',eventSuccessName: 'userCollegeUpdateEvent'})"></u-cell-item>
        <u-cell-item  title="学历"  :value="userInfo.educationDictName || '未填写'"></u-cell-item>
        <u-cell-item  title="学位"  :value="userInfo.academicDictName || '未填写'"></u-cell-item>
        <u-cell-item  title="专业"  :value="userInfo.major || '未填写'" @click="goToTextPublish({label: '专业',tip:'请填写最高学历的学校对应的专业',eventSuccessName: 'userMajorUpdateEvent'})"></u-cell-item>
        <u-cell-item  title="职业"  :value="userInfo.profession || '未填写'" @click="goToTextPublish({label: '职业',tip:'您当前工作的职业或行业',eventSuccessName: 'userProfessionUpdateEvent'})"></u-cell-item>
        <u-cell-item  title="公司"  :value="userInfo.company || '未填写'" @click="goToTextPublish({label: '公司',tip:'您当前工作的公司名称',eventSuccessName: 'userCompanyUpdateEvent'})"></u-cell-item>
        <u-cell-item  title="职位"  :value="userInfo.position || '未填写'" @click="goToTextPublish({label: '职位',tip:'您当前所在公司的职位',eventSuccessName: 'userCompanyUpdateEvent'})"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group >
        <u-cell-item  title="房"  :value="booleanText(userInfo.isHasHourse)" :label="userInfo.hourseCity"></u-cell-item>
        <u-cell-item  title="车"  :value="booleanText(userInfo.isHasCar)" :label="userInfo.carCity"></u-cell-item>
        <u-cell-item  title="月收入（元）"  :value="userInfo.monthSalary || '未填写'" @click="goToTextPublish({label: '月收入',tip:'月收入单位元',eventSuccessName: 'userMonthSalaryUpdateEvent'})"></u-cell-item>
        <u-cell-item  title="年收入（元）"  :value="userInfo.yearSalary || '未填写'" @click="goToTextPublish({label: '年收入',tip:'年收入单位元',eventSuccessName: 'userYearSalaryUpdateEvent'})"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group >
        <u-cell-item  title="吸烟"  :value="userInfo.smokingDictName || '未填写'"></u-cell-item>
        <u-cell-item  title="喝酒"  :value="userInfo.drinkingDictName || '未填写'"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group >
        <u-cell-item  title="目前在"  :value="userInfo.nowAreaName || '未填写'"></u-cell-item>
        <u-cell-item  title="家乡在"  :value="userInfo.homeAreaName || '未填写'"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group title="自我评价">
        <u-cell-item  title="相貌"  :value="userInfo.looksDictName || '未填写'"></u-cell-item>
        <u-cell-item  title="体型"  :value="userInfo.shapeDictName || '未填写'"></u-cell-item>
        <u-cell-item  title="个人介绍"  :value="userInfo.description || '未填写'" @click="goToTextPublish({label: '个人介绍',tip:'您可以填写个人性格，家庭等情况',eventSuccessName: 'userDescriptionUpdateEvent'})"></u-cell-item>
      </u-cell-group>
    </view>

  </view>
</template>

<script>
import UserInfoUrl from '../../../../pc/UserInfoUrl.js'
import UserSimpleUrl from '../../../../../../../components/usersimple/web/pc/UserSimpleUrl.js'
export default {
  data(){
    return {
      // 头像信息
      avatar: {
        action: this.$config.fileUploadUrl || '/file/cloudstorage/upload',
        url: ''
      },
      // 用户信息
      userInfo: {}

    }
  },
  onLoad(){
    this.loadUserInfo()

    let $this = this
    // 监听从裁剪页发布的事件，获得裁剪结果
    uni.$on('uAvatarCropper', path => {
      // 可以在此上传到服务端
      uni.uploadFile({
        url: $this.avatar.action,
        filePath: path,
        name: 'file',
        complete: (res) => {
          let data = JSON.parse(res.data)
          // 上传
          $this.updateAvatar(data.url)
        }
      });
    })
    // 昵称修改事件监听
    uni.$on('userNicknameUpdateEvent',value =>{
      this.userInfo.nickname = value
      this.$st.vuex('vuex_userInfo.nickname',value)
    })
  },
  onUnload(){
    uni.$off('uAvatarCropper')
    uni.$off('userNicknameUpdateEvent')
  },
  methods: {
    // 加载数据数据
    loadUserInfo() {
      this.$http.get(UserInfoUrl.userInfoSelf).then(res=>{
        this.userInfo = res.data
        this.avatar.url = this.userInfo.userAvatar
      })
    },
    // 更新成功
    updateAvatar(url){
      let data = {avatar: url}
      this.$http.put(UserSimpleUrl.updateSelf,data).then(res=>{
        this.avatar.url = url
        // 更新vuex 用户信息
        this.$st.vuex('vuex_userInfo.avatar',url)
        this.$u.toast('头像已更新')
      })
    },
    // 选择图片
    chooseAvatar(){
      this.$u.route({
        // 关于此路径，请见下方"注意事项"
        url: '/pages/common/imageCrop',
        // 内部已设置以下默认参数值，可不传这些参数
        params: {
          // 输出图片宽度，高等于宽，单位px
          destWidth: 300,
          // 裁剪框宽度，高等于宽，单位px
          rectWidth: 200,
          // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
          fileType: 'jpg',
        }
      })
    },
    // 发布或修改信息
    goToTextPublish(params){
      this.$u.route({
        url: '/pages/common/textPublish',
        params: params
      })
    },
    // 昵称填写页面
    goNicknamePublish(){
      this.$u.route({
        url: '/pages/common/textPublish',
        params: {
          label: '昵称',
          eventSuccessName: 'userNicknameUpdateEvent'
        }
      })
    }
  }

}
</script>


<style lang="scss" scoped>
page{
  background-color: #ededed;
}
.background-color-fff{
  background-color: #fff;
}
</style>